<template>
  <!-- 预约 -->
  <div class="box">
    <div class="head">
      <van-icon name="arrow-left" @click="router.back()" />
      <span>预约</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg)" />
    </div>
    <p style="margin: 3rem 0">选择日期</p>
    <van-calendar
      title="日历"
      style="
        width: 80%;
        height: 500px;
        margin: 0 auto;
        background-color: #f6f8fa;
      "
      color="#ffb900"
      switch-mode="month"
      :poppable="false"
      :show-confirm="false"
      @select="
        (e) => {
          datetime = e;
        }
      "
    />
    <div
      style="
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: center;
      "
    >
      <p style="font-size: 1.2rem">选择时间</p>
    </div>
    <div class="timebox">
      <p
        v-for="i in time"
        @click="timeactive = i"
        :class="timeactive != i ? 'timact' : 'timact2'"
        :key="i"
      >
        {{ i > 12 ? "下午" + i + "点" : "上午" + i + "点" }}
      </p>
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2rem 0;
      "
    >
      <p style="font-size: 1.2rem">选择发型师</p>
    </div>
    <div class="fabox">
      <div
        class="fabox_item"
        @click="active = index"
        :class="{ botact: active == index }"
        v-for="(i, index) in getmendian"
        :key="i.id"
      >
        <img
          style="width: 60%; height: 40%; border-radius: 50%"
          :src="i.photoUrl"
          alt=""
        />
        <p>{{ i.name }}</p>
        <div style="display: flex; flex-wrap: wrap; justify-content: center">
          <span style="font-size: .8rem;">擅长：</span><p
            style="font-size: 0.8rem"
            v-for="(j, idx2) in i.specialties"
            :key="idx2"
          >
            {{ idx2 < i.specialties.length - 1 ? j + "、" : j }}
          </p>
        </div>
      </div>
    </div>
    <div class="btnbox">
      <van-button
        type="primary"
        style="
          width: 90%;
          height: 4rem;
          font-size: 1.2rem;
          position: fixed;
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%);
          background-color: #ffb900;
          border: none;
        "
        @click="getaaa"
        >下一步</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
const time = reactive([
  "8",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "20",
  "21",
  "22",
]);
// 发型师
const falist = ref([]);
// 选中
const active = ref(0);
const router = useRouter();
const route = useRoute();
const timeactive = ref(""); //选中时间
// 日历时间
const datetime = ref(new Date().toISOString().split("T")[0]);
let info = ref(JSON.parse(localStorage.getItem("shopInfo")) || {}); //单个门店信息
//服务
let serviceinfo = ref({});
//套餐
let packinfo = ref({});

// 发型师
const gethairsty = async () => {
  try {
    let {
      data: { data },
    } = await axios.get("/shopfront/getstylist");
    falist.value = data;
  } catch (error) {
    console.log(error);
  }
};
// 根据门店id获取发型师
const getmendian = computed(() => {
  return falist.value.filter((i) => {
    if (i?.salonId?._id == info.value._id) {
      return i;
    }
  });
});

const getaaa = () => {
  // 检查是否选择了时间和日期
  if (!timeactive.value || !datetime.value) {
    showToast("请选择时间");
    return;
  }

  // 将日期和时间结合
  const selectedDate = new Date(datetime.value);
  selectedDate.setHours(parseInt(timeactive.value));

  // 检查选择的时间是否在未来
  if (selectedDate < new Date()) {
    showToast("请选择正确的时间");
    return;
  }

  // 根据服务信息或套餐信息构建 findalData
  let findalData = {
    dateTime: selectedDate.toISOString(), // 时间
    stylist: getmendian.value[active.value], // 发型师
  };

  // 如果 serviceinfo 不为空，则添加 serviceinfo
  if (JSON.stringify(serviceinfo.value) !== '{}') {
    findalData.serviceinfo = serviceinfo.value; // 服务信息
  } else {
    findalData.packinfo = packinfo.value; // 套餐信息
  }

  console.log(findalData); // 调试输出 findalData
  // 导航到付款页面
  router.push({
    path: "/fukuan",
    query: {
      findalData: JSON.stringify(findalData),
    },
  });
};

onMounted(() => {
  if (route.query.seleItem) {
    serviceinfo.value = JSON.parse(route.query.seleItem);
    console.log('777',serviceinfo.value);
  } else if (route.query.item) {
    packinfo.value = JSON.parse(route.query.item);
    console.log('666',packinfo.value);
  }
  gethairsty();
});
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 10px;
  overflow-y: scroll;
}

.box::-webkit-scrollbar {
  display: none;
}

.head {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  position: fixed;
  left: 0;
  background-color: #bbbbbd;
  z-index: 2;
}

.timebox {
  margin: 20px 0;
  overflow-x: auto;
  box-sizing: border-box;
  min-width: 100%;
  height: 4.2rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.timact {
  flex: 0 0 auto;
  background-color: #f6f8fa;
  margin: 5px 1rem;
  padding: 0.8rem 1.2rem;
  width: 17%;
  text-align: center;
  color: #666d80;
  border-radius: 10px;
}

.timact2 {
  flex: 0 0 auto;
  background-color: #fff8e6;
  margin: 5px 1rem;
  padding: 0.8rem 1.2rem;
  width: 17%;
  text-align: center;
  color: #ffb951;
  border-radius: 10px;
}

.timebox::-webkit-scrollbar {
  display: none;
}

.fabox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  height: 20vh;
  margin-bottom: 6rem;
  box-sizing: border-box;
}

.fabox_item {
  flex: 0 0 auto;
  width: 25%;
  height: 100%;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 1rem;
  border: 1px solid #bbbbbd;
}

/* 隐藏滚动条的样式（可选） */
.fabox::-webkit-scrollbar {
  display: none;
}

.botact {
  background-color: #fff8e6;
  border: 1px solid #ffe090;
}

.btnbox {
  width: 100%;
  height: 10vh;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>